import React, { useState } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, ScrollView, SafeAreaView, Image, TextInput, Alert } from 'react-native';
import { Stack, useRouter } from 'expo-router';
import { Ionicons, MaterialIcons, MaterialCommunityIcons } from '@expo/vector-icons';
import * as ImagePicker from 'expo-image-picker';
import axios from 'axios';

// 定义颜色常量
const colors = {
  primary: '#1677FF',
  secondary: '#666666',
  background: '#F8F9FA',
  text: '#333333',
  border: '#EEEEEE'
};

// 创建API实例
const api = axios.create({
  baseURL: 'http://192.168.20.81:8101',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json'
  }
});

export default function HelpAndFeedbackScreen() {
  const [activeTab, setActiveTab] = useState('help'); // 'help' 或 'feedback'
  const router = useRouter();
  
  // 退回上一页
  const handleGoBack = () => {
    router.back();
  };

  return (
    <SafeAreaView style={styles.container}>
      <Stack.Screen 
        options={{
          headerShown: false
        }}
      />
      
      {/* 顶部导航栏 */}
      <View style={styles.header}>
        <TouchableOpacity onPress={handleGoBack} style={styles.backButton}>
          <Ionicons name="arrow-back" size={24} color="#fff" />
        </TouchableOpacity>
        <Text style={styles.headerTitle}>帮助与反馈</Text>
        <View style={styles.placeholder} />
      </View>
      
      {/* 分段控制器 */}
      <View style={styles.tabContainer}>
        <TouchableOpacity 
          style={[styles.tabButton, activeTab === 'help' && styles.activeTab]}
          onPress={() => setActiveTab('help')}
        >
          <Text style={[styles.tabText, activeTab === 'help' && styles.activeTabText]}>帮助中心</Text>
        </TouchableOpacity>
        <TouchableOpacity 
          style={[styles.tabButton, activeTab === 'feedback' && styles.activeTab]}
          onPress={() => setActiveTab('feedback')}
        >
          <Text style={[styles.tabText, activeTab === 'feedback' && styles.activeTabText]}>问题反馈</Text>
        </TouchableOpacity>
      </View>
      
      {/* 内容区域 */}
      {activeTab === 'help' ? (
        <HelpCenterScreen />
      ) : (
        <FeedbackScreen />
      )}
    </SafeAreaView>
  );
}

// 帮助中心页面
function HelpCenterScreen() {
  // 常见问题状态管理
  const [expandedQuestions, setExpandedQuestions] = useState<string[]>([]);
  
  // 切换问题折叠状态
  const toggleQuestion = (questionId: string) => {
    setExpandedQuestions(prev => 
      prev.includes(questionId) 
        ? prev.filter(id => id !== questionId) 
        : [...prev, questionId]
    );
  };
  
  // 常见问题数据
  const faqData = [
    {
      id: 'profile',
      question: '如何修改个人资料?',
      answer: '在个人主页点击"编辑个人资料"按钮，即可进入编辑页面修改你的个人信息，包括头像、昵称、学术信息等。修改完成后，点击保存即可更新资料。'
    },
    {
      id: 'post',
      question: '如何发布帖子和参与讨论?',
      answer: '点击底部导航栏中的"+"按钮，即可创建新帖子。在帖子详情页面下方的评论区，你可以发表评论参与讨论。你还可以点赞、收藏感兴趣的内容。'
    },
    {
      id: 'group',
      question: '如何加入或创建社团?',
      answer: '在社区列表页面，你可以浏览所有可加入的社团，点击感兴趣的社团进入详情页，然后点击"加入"按钮申请加入。如需创建新社团，请联系学生会或管理员申请创建权限。'
    },
    {
      id: 'privacy',
      question: '账号安全和隐私设置',
      answer: '在个人主页点击"隐私设置"，你可以控制谁能查看你的个人资料、联系方式，以及谁能与你互动。定期修改密码并开启双因素认证，可以提高账号安全性。'
    },
    {
      id: 'report',
      question: '如何举报不当内容?',
      answer: '如发现违规内容，可点击帖子或评论右上角的"更多"按钮，选择"举报"选项，请详细说明举报原因，管理员会尽快审核处理。我们鼓励共同维护社区环境的和谐。'
    }
  ];
  
  // 处理相关资源点击
  const handleResourceClick = (resourceType: string) => {
    Alert.alert("提示", "该功能正在开发中，敬请期待", [
      { text: "关闭", style: "cancel" }
    ]);
  };

  return (
    <ScrollView style={styles.helpContainer}>
      {/* 常见问题部分 */}
      <View style={styles.sectionContainer}>
        <Text style={styles.sectionTitle}>常见问题</Text>
        
        {faqData.map(item => (
          <View key={item.id} style={styles.faqItem}>
            <TouchableOpacity 
              style={styles.faqQuestion}
              onPress={() => toggleQuestion(item.id)}
              activeOpacity={0.7}
            >
              <Text style={styles.faqQuestionText}>{item.question}</Text>
              <MaterialIcons 
                name={expandedQuestions.includes(item.id) ? "keyboard-arrow-up" : "keyboard-arrow-down"} 
                size={24} 
                color="#666" 
              />
            </TouchableOpacity>
            
            {expandedQuestions.includes(item.id) && (
              <View style={styles.faqAnswer}>
                <Text style={styles.faqAnswerText}>{item.answer}</Text>
              </View>
            )}
          </View>
        ))}
      </View>
      
      {/* 联系客服部分 */}
      <View style={styles.sectionContainer}>
        <Text style={styles.sectionTitle}>联系客服</Text>
        
        <View style={styles.contactItem}>
          <View style={styles.contactIconContainer}>
            <MaterialIcons name="email" size={24} color="#fff" />
          </View>
          <View style={styles.contactInfo}>
            <Text style={styles.contactLabel}>邮箱</Text>
            <Text style={styles.contactValue}>202241308@stu.qmu.edu.cn</Text>
          </View>
        </View>
        
        <View style={styles.contactItem}>
          <View style={[styles.contactIconContainer, { backgroundColor: '#4CAF50' }]}>
            <MaterialIcons name="phone" size={24} color="#fff" />
          </View>
          <View style={styles.contactInfo}>
            <Text style={styles.contactLabel}>电话</Text>
            <Text style={styles.contactValue}>15794807263</Text>
            <Text style={styles.contactSubLabel}>周一至周五 9:00-17:00</Text>
          </View>
        </View>
        
        <View style={styles.contactItem}>
          <View style={[styles.contactIconContainer, { backgroundColor: '#9C27B0' }]}>
            <MaterialCommunityIcons name="chat-processing" size={24} color="#fff" />
          </View>
          <View style={styles.contactInfo}>
            <Text style={styles.contactLabel}>在线客服</Text>
            <Text style={styles.contactValue}>每天 8:00-22:00</Text>
            <TouchableOpacity style={styles.chatButton}>
              <Text style={styles.chatButtonText}>立即咨询</Text>
            </TouchableOpacity>
          </View>
        </View>
      </View>
      
      {/* 相关资源部分 */}
      <View style={styles.sectionContainer}>
        <Text style={styles.sectionTitle}>相关资源</Text>
        
        <TouchableOpacity 
          style={styles.resourceItem}
          onPress={() => handleResourceClick('guide')}
        >
          <View style={[styles.resourceIconContainer, { backgroundColor: '#FF9800' }]}>
            <MaterialIcons name="menu-book" size={24} color="#fff" />
          </View>
          <Text style={styles.resourceText}>使用指南</Text>
          <MaterialIcons name="chevron-right" size={24} color="#ccc" />
        </TouchableOpacity>
        
        <TouchableOpacity 
          style={styles.resourceItem}
          onPress={() => handleResourceClick('rules')}
        >
          <View style={[styles.resourceIconContainer, { backgroundColor: '#2196F3' }]}>
            <MaterialIcons name="gavel" size={24} color="#fff" />
          </View>
          <Text style={styles.resourceText}>社区规范</Text>
          <MaterialIcons name="chevron-right" size={24} color="#ccc" />
        </TouchableOpacity>
        
        <TouchableOpacity 
          style={styles.resourceItem}
          onPress={() => handleResourceClick('privacy')}
        >
          <View style={[styles.resourceIconContainer, { backgroundColor: '#607D8B' }]}>
            <MaterialIcons name="security" size={24} color="#fff" />
          </View>
          <Text style={styles.resourceText}>隐私政策</Text>
          <MaterialIcons name="chevron-right" size={24} color="#ccc" />
        </TouchableOpacity>
      </View>
    </ScrollView>
  );
}

// 反馈提交页面
function FeedbackScreen() {
  const [feedbackType, setFeedbackType] = useState('功能异常');
  const [feedbackContent, setFeedbackContent] = useState('');
  const [contactInfo, setContactInfo] = useState('');
  const [images, setImages] = useState<ImagePicker.ImagePickerAsset[]>([]);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [myFeedbacks, setMyFeedbacks] = useState([]);
  const [showHistory, setShowHistory] = useState(false);

  // 选择图片
  const pickImage = async () => {
    if (images.length >= 5) {
      Alert.alert('提示', '最多只能上传5张图片');
      return;
    }

    const result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      allowsEditing: false,
      quality: 0.8,
      allowsMultipleSelection: true,
      selectionLimit: 5 - images.length,
    });

    if (!result.canceled) {
      const newImages = [...images, ...result.assets];
      if (newImages.length > 5) {
        Alert.alert('提示', '最多只能上传5张图片，已自动选择前5张');
        setImages(newImages.slice(0, 5));
      } else {
        setImages(newImages);
      }
    }
  };

  // 删除图片
  const removeImage = (index: number) => {
    const newImages = [...images];
    newImages.splice(index, 1);
    setImages(newImages);
  };

  // 提交反馈
  const submitFeedback = async () => {
    if (!feedbackContent.trim()) {
      Alert.alert('提示', '请填写反馈内容');
      return;
    }

    setIsSubmitting(true);

    try {
      const formData = new FormData();
      formData.append('type', feedbackType);
      formData.append('content', feedbackContent);
      
      if (contactInfo.trim()) {
        formData.append('contactInfo', contactInfo);
      }

      // 添加图片文件
      images.forEach((image, index) => {
        const localUri = image.uri;
        const filename = localUri.split('/').pop() || `image${index}.jpg`;
        
        // 从URI获取文件扩展名
        const match = /\.(\w+)$/.exec(filename);
        const type = match ? `image/${match[1]}` : 'image/jpeg';
        
        // @ts-ignore
        formData.append('files', {
          uri: localUri,
          name: filename,
          type
        });
      });

      // 发送请求
      const response = await api.post('/api/feedback/add/with-files', formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      });

      if (response.data.code === 0) {
        Alert.alert('提示', '反馈提交成功', [
          { text: '确定', onPress: () => {
            setFeedbackContent('');
            setContactInfo('');
            setImages([]);
            setShowHistory(true);
            loadMyFeedbacks();
          }}
        ]);
      } else {
        Alert.alert('提交失败', response.data.message || '请稍后再试');
      }
    } catch (error: any) {
      console.error('提交反馈失败:', error);
      Alert.alert('提交失败', error.response?.data?.message || '网络错误，请稍后再试');
    } finally {
      setIsSubmitting(false);
    }
  };

  // 加载我的反馈历史
  const loadMyFeedbacks = async () => {
    try {
      const response = await api.post('/api/feedback/my/list/page', {
        current: 1,
        pageSize: 10
      });

      if (response.data.code === 0) {
        setMyFeedbacks(response.data.data.records || []);
      }
    } catch (error) {
      console.error('获取反馈历史失败:', error);
    }
  };

  // 组件首次加载时获取反馈历史
  React.useEffect(() => {
    loadMyFeedbacks();
  }, []);

  // 渲染我的反馈历史列表项
  const renderFeedbackItem = (item: any) => {
    const statusColors: any = {
      'pending': '#FFBB33',
      'processing': '#FFBB33', 
      'resolved': '#33CC66'
    };
    
    const statusText: any = {
      'pending': '处理中',
      'processing': '处理中',
      'resolved': '已完成'
    };

    return (
      <View key={item.id} style={styles.feedbackItem}>
        <View style={styles.feedbackHeader}>
          <Text style={styles.feedbackTitle} numberOfLines={1}>
            {item.content && item.content.length > 20 ? item.content.substring(0, 20) + '...' : item.content}
          </Text>
          <View style={[styles.statusBadge, { backgroundColor: statusColors[item.status] || '#999' }]}>
            <Text style={styles.statusText}>{statusText[item.status] || '未知'}</Text>
          </View>
        </View>
        <Text style={styles.feedbackTime}>提交于{item.createTime && item.createTime.substring(0, 10)}</Text>
        
        {item.replyContent && (
          <View style={styles.replyContainer}>
            <Text style={styles.replyLabel}>官方回复：</Text>
            <Text style={styles.replyContent}>{item.replyContent}</Text>
          </View>
        )}
      </View>
    );
  };

  return (
    <ScrollView style={styles.formContainer}>
      {!showHistory ? (
        <>
          <View style={styles.formSection}>
            <Text style={styles.sectionTitle}>提交反馈</Text>
            
            <Text style={styles.inputLabel}>反馈类型</Text>
            <View style={styles.pickerContainer}>
              <Ionicons name="chevron-down" size={20} color="#666" style={styles.pickerIcon} />
              <TouchableOpacity 
                style={styles.pickerTouchable}
                onPress={() => {
                  // 这里应该显示一个选择器，但为简化起见，我们直接循环切换几个预设类型
                  const types = ['功能异常', '使用建议', '界面优化', '其他问题'];
                  const currentIndex = types.indexOf(feedbackType);
                  const nextIndex = (currentIndex + 1) % types.length;
                  setFeedbackType(types[nextIndex]);
                }}
              >
                <Text style={styles.pickerText}>{feedbackType}</Text>
              </TouchableOpacity>
            </View>
            
            <Text style={styles.inputLabel}>问题描述</Text>
            <TextInput
              style={styles.textArea}
              multiline
              numberOfLines={5}
              placeholder="请详细描述你遇到的问题或建议..."
              placeholderTextColor="#999"
              value={feedbackContent}
              onChangeText={setFeedbackContent}
            />
            
            <Text style={styles.inputLabel}>图片上传 (可选)</Text>
            <View style={styles.imageUploadContainer}>
              {images.map((image, index) => (
                <View key={index} style={styles.imagePreviewContainer}>
                  <Image source={{ uri: image.uri }} style={styles.imagePreview} />
                  <TouchableOpacity 
                    style={styles.removeImageButton}
                    onPress={() => removeImage(index)}
                  >
                    <Ionicons name="close-circle" size={24} color="#FF6B6B" />
                  </TouchableOpacity>
                </View>
              ))}
              
              {images.length < 5 && (
                <TouchableOpacity style={styles.imageUploadButton} onPress={pickImage}>
                  <Ionicons name="cloud-upload-outline" size={32} color="#ccc" />
                  <Text style={styles.uploadText}>点击上传图片</Text>
                  <Text style={styles.uploadSubText}>支持JPG、PNG格式，最大10MB</Text>
                </TouchableOpacity>
              )}
            </View>
            
            <Text style={styles.inputLabel}>联系方式 (可选)</Text>
            <TextInput
              style={styles.input}
              placeholder="邮箱或手机号，方便我们联系你"
              placeholderTextColor="#999"
              value={contactInfo}
              onChangeText={setContactInfo}
            />
          </View>
          
          <View style={styles.buttonContainer}>
            <TouchableOpacity 
              style={styles.submitButton} 
              onPress={submitFeedback}
              disabled={isSubmitting}
            >
              <Text style={styles.submitButtonText}>
                {isSubmitting ? '提交中...' : '提交反馈'}
              </Text>
            </TouchableOpacity>
            
            <TouchableOpacity 
              style={styles.historyButton}
              onPress={() => setShowHistory(true)}
            >
              <Text style={styles.historyButtonText}>我的反馈历史</Text>
            </TouchableOpacity>
          </View>
        </>
      ) : (
        <View style={styles.historyContainer}>
          <View style={styles.historyHeader}>
            <Text style={styles.sectionTitle}>我的反馈历史</Text>
            <TouchableOpacity onPress={() => setShowHistory(false)}>
              <Text style={styles.newFeedbackButton}>新建反馈</Text>
            </TouchableOpacity>
          </View>
          
          {myFeedbacks.length > 0 ? (
            myFeedbacks.map((item: any) => renderFeedbackItem(item))
          ) : (
            <View style={styles.emptyHistoryContainer}>
              <Ionicons name="document-text-outline" size={64} color="#ccc" />
              <Text style={styles.emptyHistoryText}>暂无反馈记录</Text>
            </View>
          )}
        </View>
      )}
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F8F9FA',
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    backgroundColor: colors.primary,
    paddingVertical: 15,
    paddingHorizontal: 15,
  },
  backButton: {
    padding: 5,
  },
  headerTitle: {
    color: '#fff',
    fontSize: 18,
    fontWeight: 'bold',
  },
  placeholder: {
    width: 24,
  },
  tabContainer: {
    flexDirection: 'row',
    backgroundColor: '#fff',
    borderBottomWidth: 1,
    borderBottomColor: '#EEEEEE',
  },
  tabButton: {
    flex: 1,
    paddingVertical: 15,
    alignItems: 'center',
  },
  activeTab: {
    borderBottomWidth: 2,
    borderBottomColor: colors.primary,
  },
  tabText: {
    fontSize: 16,
    color: '#666',
  },
  activeTabText: {
    color: colors.primary,
    fontWeight: 'bold',
  },
  helpContainer: {
    flex: 1,
    padding: 15,
    backgroundColor: colors.background,
  },
  sectionContainer: {
    backgroundColor: '#fff',
    borderRadius: 10,
    padding: 15,
    marginBottom: 15,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.05,
    shadowRadius: 2,
    elevation: 2,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 15,
    color: '#333',
  },
  faqItem: {
    marginBottom: 15,
    borderBottomWidth: 1,
    borderBottomColor: '#f0f0f0',
    paddingBottom: 10,
  },
  faqQuestion: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingVertical: 10,
  },
  faqQuestionText: {
    fontSize: 15,
    fontWeight: '500',
    color: '#333',
    flex: 1,
    paddingRight: 10,
  },
  faqAnswer: {
    marginTop: 5,
    padding: 10,
    backgroundColor: '#f9f9f9',
    borderRadius: 8,
  },
  faqAnswerText: {
    fontSize: 14,
    color: '#666',
    lineHeight: 20,
  },
  contactItem: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 20,
    paddingVertical: 5,
  },
  contactIconContainer: {
    width: 40,
    height: 40,
    borderRadius: 20,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#2196F3',
  },
  contactInfo: {
    marginLeft: 15,
    flex: 1,
  },
  contactLabel: {
    fontSize: 14,
    fontWeight: '500',
    color: '#555',
  },
  contactValue: {
    fontSize: 15,
    color: '#333',
    marginTop: 2,
  },
  contactSubLabel: {
    fontSize: 12,
    color: '#999',
    marginTop: 2,
  },
  chatButton: {
    backgroundColor: colors.primary,
    borderRadius: 8,
    paddingVertical: 8,
    paddingHorizontal: 15,
    alignItems: 'center',
    marginTop: 8,
    alignSelf: 'flex-start',
  },
  chatButtonText: {
    color: '#fff',
    fontSize: 14,
    fontWeight: 'bold',
  },
  resourceItem: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 15,
    borderWidth: 1,
    borderColor: '#EEEEEE',
    borderRadius: 8,
    marginBottom: 10,
    backgroundColor: '#fff',
  },
  resourceIconContainer: {
    width: 40,
    height: 40,
    borderRadius: 20,
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: 15,
  },
  resourceText: {
    fontSize: 15,
    fontWeight: '500',
    color: '#333',
    flex: 1,
  },
  centerContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  emptyText: {
    fontSize: 16,
    color: '#999',
    textAlign: 'center',
  },
  formContainer: {
    flex: 1,
    padding: 15,
  },
  formSection: {
    backgroundColor: '#fff',
    borderRadius: 10,
    padding: 15,
    marginBottom: 15,
  },
  inputLabel: {
    fontSize: 14,
    fontWeight: '500',
    color: '#555',
    marginBottom: 5,
    marginTop: 10,
  },
  input: {
    backgroundColor: '#F5F5F5',
    borderWidth: 1,
    borderColor: '#EEEEEE',
    borderRadius: 8,
    padding: 12,
    fontSize: 15,
    color: '#333',
  },
  textArea: {
    backgroundColor: '#F5F5F5',
    borderWidth: 1,
    borderColor: '#EEEEEE',
    borderRadius: 8,
    padding: 12,
    fontSize: 15,
    color: '#333',
    minHeight: 120,
    textAlignVertical: 'top',
  },
  pickerContainer: {
    backgroundColor: '#F5F5F5',
    borderWidth: 1,
    borderColor: '#EEEEEE',
    borderRadius: 8,
    position: 'relative',
  },
  pickerIcon: {
    position: 'absolute',
    right: 12,
    top: 12,
    zIndex: 1,
  },
  pickerTouchable: {
    padding: 12,
  },
  pickerText: {
    fontSize: 15,
    color: '#333',
  },
  imageUploadContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    marginTop: 5,
  },
  imageUploadButton: {
    width: 100,
    height: 100,
    borderWidth: 1,
    borderColor: '#EEEEEE',
    borderRadius: 8,
    borderStyle: 'dashed',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F9F9F9',
    margin: 5,
  },
  uploadText: {
    fontSize: 12,
    color: '#999',
    marginTop: 5,
  },
  uploadSubText: {
    fontSize: 10,
    color: '#AAA',
    marginTop: 2,
    textAlign: 'center',
  },
  imagePreviewContainer: {
    width: 100,
    height: 100,
    margin: 5,
    borderRadius: 8,
    overflow: 'hidden',
    position: 'relative',
  },
  imagePreview: {
    width: '100%',
    height: '100%',
  },
  removeImageButton: {
    position: 'absolute',
    top: 5,
    right: 5,
    backgroundColor: 'rgba(255,255,255,0.8)',
    borderRadius: 12,
  },
  buttonContainer: {
    marginBottom: 30,
  },
  submitButton: {
    backgroundColor: colors.primary,
    borderRadius: 8,
    padding: 15,
    alignItems: 'center',
    marginBottom: 10,
  },
  submitButtonText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: 'bold',
  },
  historyButton: {
    backgroundColor: '#fff',
    borderRadius: 8,
    padding: 15,
    alignItems: 'center',
    borderWidth: 1,
    borderColor: '#EEEEEE',
  },
  historyButtonText: {
    color: '#666',
    fontSize: 16,
  },
  historyContainer: {
    flex: 1,
  },
  historyHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 15,
  },
  newFeedbackButton: {
    color: colors.primary,
    fontSize: 15,
    fontWeight: '500',
  },
  feedbackItem: {
    backgroundColor: '#fff',
    borderRadius: 8,
    padding: 15,
    marginBottom: 10,
    borderWidth: 1,
    borderColor: '#EEEEEE',
  },
  feedbackHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 5,
  },
  feedbackTitle: {
    fontSize: 15,
    fontWeight: '500',
    color: '#333',
    flex: 1,
  },
  statusBadge: {
    paddingHorizontal: 8,
    paddingVertical: 4,
    borderRadius: 4,
  },
  statusText: {
    color: '#fff',
    fontSize: 12,
    fontWeight: '500',
  },
  feedbackTime: {
    fontSize: 12,
    color: '#999',
    marginBottom: 10,
  },
  replyContainer: {
    marginTop: 10,
    backgroundColor: '#F9F9F9',
    padding: 10,
    borderRadius: 6,
  },
  replyLabel: {
    fontSize: 13,
    fontWeight: '500',
    color: '#666',
    marginBottom: 5,
  },
  replyContent: {
    fontSize: 13,
    color: '#333',
  },
  emptyHistoryContainer: {
    alignItems: 'center',
    justifyContent: 'center',
    padding: 50,
  },
  emptyHistoryText: {
    color: '#999',
    fontSize: 15,
    marginTop: 10,
  },
});